<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<style>
 *{
  margin:0;
  padding:0;
 }
 #box1{
   width:100px;
   height:100px;
   background-color: aqua;
   position:absolute;
   top:200px;
   left:0;
 }
 #box{
   background-color:yellow;
   position: relative;
   width:100px;
   height:100px;
   left:0;
 }
 #box2{
   height:100px;
   background-color:red;
   position:absolute;
   top:350px;
   left:0;
 }
 #box3{
   width:100px;
   height:100px;
   background-color:blueviolet;
   position:absolute;
   top:500px;
   left:0;
 }
</style>
<script>
  window.onload=function(){
  var box=document.getElementById("box");
  var box1=document.getElementById("box1");
  var box2=document.getElementById("box2");
  var box3=document.getElementById("box3");
  var btn=document.getElementById("btn");
  var btn1=document.getElementById("btn1");
  var btn2=document.getElementById("btn2");
  var btn3=document.getElementById("btn3");
  var btn4=document.getElementById("btn4");
btn.onclick=function(){
  /*clearInterval(t);
   t=setInterval(function(){
    var old=parseInt(box.style.left);
    var ne=old+10;
    box.style.left=ne+'px';
    if(ne==800){
      clearInterval(t);
    }
  },30)*/
  move(box,"left",800,10);
  };
  btn1.onclick=function(){
    /*clearInterval(t);
   t=setInterval(function(){
    var old=parseInt(box.style.left);
    var ne=old-10;
    if(ne<0){
      ne=0;
    }
    box.style.left=ne+'px';
    if(ne==0){
      clearInterval(t);
    }
  },30)
  */
  move(box,"left",0,-10);
  };
  btn2.onclick=function(){
    move(box1,"left",800,20);
  }
  btn3.onclick=function(){
    move(box2,"width",800,20);
  }
  btn4.onclick=function(){
    move(box3,"left",800,20,function(){
      move(box3,"top",800,10,function(){

      })
    });
  }
  function move(obj,str,target,speed,callback){
    clearInterval(obj.t);
    obj.t=setInterval(function(){
    var old=parseInt(obj.style[str]);
    var newvalue=old+speed;
    if((speed<0 && newvalue<target) || (speed>0 && newvalue>target)){
     newvalue=target;
    }
    obj.style[str]=newvalue+'px';
    if(newvalue==target){
      clearInterval(obj.t);
      callback();
    }
  },30)
  };
  }
 </script>
<body>
 <button id="btn">点击box右移</button>
 <button id="btn1">点击box左移</button>
 <button id="btn2">点击box1右移</button>
 <button id="btn3">变宽</button>
 <button id="btn4">动画</button><br><br>
 <div id="box" style="left:0"></div>
 <div id="box1" style="left:0"></div>
 <div id="box2" style="width:100px"></div>
 <div id="box3" style="left:0px;top:500px"></div>
 <div style="width:0;height:800px;border-left:1px black solid;position: absolute;left:800px;top:0px"></div>
</body>
</html>                                                                                                                                 